<template>
  <div style="width: 100%;background-color: #213547">

    <h2> 子内容</h2>
    msg值: {{ msg }}<br>
    props.msg值: {{ props.msg }}<br>
    toRefMsg值: {{ toRefMsg }}<br>

    <div>
      <span>子父传值update方式</span>
      <el-input v-model="changeMsg" style="width: 200px"></el-input>
    </div>

    <div>
      <span>子父传值defineModel方式</span>
      <el-input v-model="changeMsg2" style="width: 200px"></el-input>
    </div>


    obj:{{ obj }}<br>
    兄弟传值:{{ orderNum }}
  </div>
</template>

<script setup>
//生命周期

import {useRoute} from "vue-router";
import bus from '@/plugin/Bus.js'

onMounted(() => {
})

const route = useRoute();
onMounted(() => {
  // 打印
  console.log('route:', toRaw(route).query)
  console.log('route:' + route.query.name)
})

// 定义属性
let props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})

const changeMsg2 = defineModel("msg")

// 响应式解构 count 属性
const toRefMsg = toRef(props, 'msg')

// let {msg} = defineProps({
//   msg: {
//     type: Number,
//     default: 0
//   },
//   age:Number
// })


let emits = defineEmits([
  'changeOrder',
  'update:msg' // 修改父属性, 固定格式  update:
])


let obj = ref(1)

const changeMsg = computed({

  get() {
    return props.msg
    // return msg.value
  },
  set(val) {
    console.log('子组件修改父属性=' + val)
    emits('update:msg', val)
  }
})


let orderNum = ref(0)
onBeforeMount(() => {
  bus.on('orderNum', e => {
    console.log('orderNum=' + e)
    orderNum.value = e
  })
})

onMounted(() => {

})

onBeforeUnmount(() => {
  bus.off('orderNum')
})
</script>


